<template>
<div class="father">
  <div class="son">
    <div class="title">
      问卷猩后端管理系统
    </div>
    <!--  登录表单(无规则)-->
    <el-form :model="loginForm" ref="loginForm" class="loginForm">
      <el-form-item prop="username">
        <el-input v-model="loginForm.username" prefix-icon="el-icon-user" class="input-ui" placeholder="UserName"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="loginForm.password" prefix-icon="el-icon-star-off" type="password" placeholder="PassWord"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
        <el-button @click="resetForm('loginForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</div>
</template>

<script>
import {tips} from "@/utils/tips";
import axios from "axios";

export default {
  name: "Login.vue",
  data(){
    return {
      loginForm:{
        username:'zch',
        password:'123123',
      },
    }
  },
  methods: {
    submitForm(form) {
      const _this = this;
      if (this.loginForm.username && this.loginForm.password) {
        console.log("打印form表单内容：")
        console.log(this.loginForm.username)
        console.log(this.loginForm.password)
        //Validate 方法用来验证表单的输入数据是否符合要求，并返回一个布尔值
        this.$refs[form].validate((valid) => {
          if (valid) {
            axios.post("http://localhost:8089/api/user/login",this.loginForm).then(
                response => {
                  console.log("请求成功");
                  console.log(response);
                  if(response.data.code==200){
                    localStorage.setItem("id",response.data.data.userId);
                    localStorage.setItem("admin",response.data.data.username);
                    localStorage.setItem("pass",response.data.data.password);
                    localStorage.setItem("email",response.data.data.email);
                    this.$router.push('/Home');
                    tips(_this, '成功', 'success', '登录成功');
                  }else{
                    tips(_this, '错误', 'error', '用户名或密码错误');
                  }
                },
                error => {
                  console.log(error);
                  tips(_this, '错误', 'error', '用户名或密码错误');
                },
            );
          } else {
            tips(_this, '错误', 'error', '输入信息有误');
            return false;
          }
        })
      } else {
        tips(_this, '错误', 'error', '请输入用户信息')
        // this.tips('错误','error','请输入用户信息');
      }
    },
    resetForm(form) {
      const _this = this;
      if (this.loginForm.username || this.loginForm.password) {
        //重置信息
        this.$refs[form].resetFields();
        tips(_this, '成功', 'success', '信息已重置');
      } else {
        tips(_this, '警告', 'warning', '当前未输入用户信息');
      }
    },
    //封装提示信息
    tips(title, type, msg) {
      this.$notify({
        title: title,
        type: type,
        message: msg,
      })
    },
    //判断登录状态
    loginStatus() {
      if (this.$store.state.toLogin) {
        this.$notify({
          title: '错误',
          type: 'error',
          message: '请先登录',
        });
        this.$store.state.toLogin = !this.$store.state.toLogin;
      }
    },
  }
}
</script>

<style scoped>

.father{
  background-color: #283443;
  margin-top: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40%;
  margin-left: 30%;
  border-radius: 30px;
  /*height: 100vh;*/
}
.son{
  /*background-color: #42b983;*/
  margin-top: 30px;
  margin-bottom: 30px;
  /*width: 50%;*/
  /*height: 50%;*/
}
.title{
  color: white;
  font-size: 28px;
  margin-bottom: 30px;

}
.loginForm input{
  color: white;
  background-color: #2c3e50;
}
.input-ui{
  background-color: #2c3e50;
}
</style>
